import {CCard} from "@/components/card"
import {IconImg, ParamStatusIcon} from "@/components/images"
import {Text, View} from "@tarojs/components"
import {AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton} from "taro-ui"
import "./components.scss"
import "taro-ui/dist/style/components/modal.scss"
import {useEffect, useState} from "react"
import Taro from "@tarojs/taro"

const HistoryCardTitle: React.FC<{time: string}> = ({time}): JSX.Element => {
	return (
		<View className="h-38 bg-xxxx_bg mb-4 pl-16 flex items-center">
			<IconImg imgName="historyRecord" style={{marginRight: "12rpx"}}></IconImg>
			<Text className="noHanzi text-14 font-bold">{time}</Text>
		</View>
	)
}

export const HistoryCard: React.FC<{option: Device.CheckHistoryData}> = ({option}): JSX.Element => {
	// 显示参数弹窗的标识
	const [isShowParamModal, setIsShowParamModal] = useState(false)

	// 当前点击参数信息
	const [currentParamInfo, setCurrentParamInfo] = useState({
		paramName: "",
		paramValue: "",
		paramUnit: ""
	})

	// 参数项点击事件
	const paramItemClick = param => {
		console.log("参数信息", param)
		setCurrentParamInfo({
			paramName: param.checkDataName,
			paramValue: param.checkDataValue,
			paramUnit: param.checkDataUnit
		})
		// setIsShowParamModal(true)
		Taro.showModal({
			title: param.checkDataName,
			content: param.checkDataValue + " " + param.checkDataUnit,
			success: function (res) {
				if (res.confirm) {
					console.log("用户点击确定")
				} else if (res.cancel) {
					console.log("用户点击取消")
				}
			}
		})
	}

	useEffect(() => {
		console.log("参数option", option)
	}, [])
	return (
		<View className="px-16">
			<CCard
				title={<HistoryCardTitle time={option.devCheckTime}></HistoryCardTitle>}
				style={{
					padding: 0,
					marginBottom: "32rpx"
				}}
			>
				<View className="px-18 grid grid-cols-13 gap-x-8 gap-y-4">
					{/* 参数盒子中的每一行 */}
					{option.checkdataList.map(item => [
						<View className="h-48 flex justify-center items-center">
							<ParamStatusIcon status={item.paramStatus}></ParamStatusIcon>
						</View>,
						<View
							className="hanzi param_name text-14 text-left font-medium col-span-6 h-48 leading-48"
							onClick={() => {
								paramItemClick(item)
							}}
						>
							{item.checkDataName}
						</View>,
						<View
							className="notHanzi check_data_value text-12 text-left font-medium col-span-4 h-48 leading-48"
							onClick={() => {
								paramItemClick(item)
							}}
						>
							{`${item.checkDataValue || "---"} ${item.checkDataUnit}`}
						</View>,
						<View className="hanzi text-14 text-right text-xx_text col-span-2 h-48 leading-48">
							{item.paramStatus}
						</View>
					])}
				</View>
			</CCard>

			{/* 参数弹窗 */}
			<AtModal isOpened={isShowParamModal} className="param_modal_box">
				<AtModalHeader>参数信息</AtModalHeader>
				<AtModalContent>
					这里是正文内容，欢迎加入京东凹凸实验室 这里是正文内容，欢迎加入京东凹凸实验室
					这里是正文内容，欢迎加入京东凹凸实验室
				</AtModalContent>
				<AtModalAction>
					{" "}
					<AtButton>取消</AtButton> <AtButton>确定</AtButton>{" "}
				</AtModalAction>
			</AtModal>
			{/* <AtButton type="primary">按钮文案</AtButton> */}
		</View>
	)
}
